<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节点内容操作</title>
</head>
<body>

<h1><p>hello dom</p></h1>

<h2>注册</h2>
<form action="user/register" method="get">
    <p><input type="text" name="username" placeholder="请填写用户名"></p>
    <p><input type="password" name="password" placeholder="请填写密码" value="123456"></p>
    <p><input type="submit" value="注册"></p>
</form>

<script>
    // 获取p标签的内容  打印输出
    let p_ele = document.getElementsByTagName('h1')
    // 通过索引在数组中找到具体的节点对象    纯文本
    // let info = p_ele[0].innerText
    //  识别标签中的html标签
    let info = p_ele[0].innerHTML
    console.log(info)
    // 改变节点内容
    // p_ele[0].innerText = 'hello javascript'
    p_ele[0].innerHTML = '<p>hello javascript</p>'

    console.log('-------------------------------------')
    // 表单对象节点内容获取  value
    let pwd_ele = document.querySelector('input[type="password"]')
    let val = pwd_ele.value
    console.log(val)

    // 动态添加数据到表单对象
    let username_ele = document.querySelector('input[type="text"]')
    username_ele.value = 'admin'
    pwd_ele.value = '111111'
</script>
</body>
</html>
